<script setup>
import RenderLayout from "../renderLayout/index.vue";
import LoadLocal from "./loadLocal/index.vue";
import WorldPosition from './worldPosition/index.vue'
import ClipModel from './clipModel/index.vue'
import { ref } from "vue";
let activeFunc = ref(null);
let funcList = [
  {
    funcName: "在线模型渲染",
    func: "",
    funcId: 1,
  },
  {
    funcName: "本地模型渲染",
    func: "",
    funcId: 2,
  },
  {
    funcName: "世界坐标选取",
    func: "",
    funcId: 3,
  },
  {
    funcName: "模型切割",
    func: "",
    funcId: 4,
  },
];
</script>
<template>
  <RenderLayout>
    <template #funcContainer>
      <div
        class="funcItem"
        :class="{ activedFunc: activeFunc == funcItem.funcId }"
        v-for="funcItem in funcList"
        :key="funcItem.funcName"
        @click="
          () => {
            activeFunc = funcItem.funcId;
          }
        "
      >
        {{ funcItem.funcName }}
      </div>
    </template>
    <template #renderContainer>
      <LoadLocal v-if="activeFunc == 2"></LoadLocal>
      <WorldPosition v-if="activeFunc==3"></WorldPosition>
      <ClipModel v-if="activeFunc==4"></ClipModel>
    </template>
  </RenderLayout>
</template>
<style lang="scss" scoped>
.activedFunc {
  background-color: coral;
  color: #fff;
}
</style>
